import 'package:flutter_banner/banner_widget.dart';
import 'package:lishopflu/base/base_import.dart';
import 'package:lishopflu/base/controller_import.dart';
import 'package:lishopflu/bean/id_text_bean.dart';
import 'package:lishopflu/router/app_navigator.dart';

import 'package:lishopflu/base/view_import.dart';

import 'product_detail_ctl.dart';

class ProductDetailPage extends BasePage<ProductDetailCtl>{



  @override
  void onCreate(BuildContext mContext) {
    setAppTitle(controller.title);
  }

  @override
  Widget pageBody(BuildContext context) {
    return Flex(
      direction: Axis.vertical,
      children: [
        Expanded(
          flex: 1,
          child: mainBody(),
        ),
        bottomBtn(),
      ],
    );
  }

  Widget appbar() {
    return null;
  }

  Widget floBtn(){
    return !controller.showToTopBtn ? null : FloatingActionButton(
        child: Icon(Icons.arrow_upward),
        onPressed: () {
          //返回到顶部时执行动画
          controller.scrollController.animateTo(.0,
              duration: Duration(milliseconds: 200),
              curve: Curves.ease
          );
        },
      tooltip: '回到顶部',

    );
  }

  // 1.1 中间内容
  Widget mainBody(){
    return NestedScrollView(
      controller: controller.scrollController,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
        return [
          SliverAppBar(
            pinned: true,/// 固定
            snap: false,/// AppBar跟随手指滑动而滑动  floating必须为true才可以使用
            floating: false,/// 当snap = true时 这个参数必须为true
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.parallax,
              background: bannerBody(),
            ),
            leading: CommonWidget.leading(() {
              finish();
            }),
            title: Text(controller.title, style: TextStyle(color: Colors.white, fontSize: 16),),
            centerTitle: true,
//            bottom: PreferredSize(
//              preferredSize: Size(MediaQuery.of(context).size.width, 40),
//              child: Text(''),
//            ),
            actions: [
              IconButton(icon: Icon(Icons.search, color: Colors.white,), onPressed: () { controller.toSearch(); }),
              IconButton(icon: Icon(Icons.more_horiz, color: Colors.white,), onPressed: () { ToastUtil.toast('more'); }),
            ],
          ),
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: SliverGrid( //Grid
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, //Grid按两列显示
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  //创建子widget
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
          //List
          SliverPadding(
            padding: EdgeInsets.all(8.0),
            sliver: Obx(() => SliverList(
              delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    return itemBuilder(context, index);
                  },
                  childCount: controller.mList.length
              ),
            ),
            ),
          ),

          SliverPadding(
            padding: EdgeInsets.all(8.0),
            sliver: Obx(() => SliverList(
              delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    return itemBuilder(context, index);
                  },
                  childCount: controller.mList.length
              ),
            ),
            ),
          ),
        ];
      },
      body: Container(
        color: Colors.black38,
        margin: EdgeInsets.all(10),
        height: 150,
      ),/*ListView.builder(
        itemCount: mList.length,
        itemBuilder: (BuildContext context, int index){
          return itemBuilder(context, index);
        },
      ),*/
    );
  }

  // 1.2 底下的按钮
  Widget bottomBtn(){
    return Row(
      children: [
        TextButton(
          child: Column(
            children: [
              Icon(Icons.store),
              Text('店铺', style: TextStyle(fontSize: 12, color: Colors.black),),
            ],
          ),
          onPressed: (){
            toast('店铺');
          },
        ),
        TextButton(
          child: Column(
            children: [
              Icon(Icons.message, color: Colors.black45,),
              Text('客服', style: TextStyle(fontSize: 12, color: Colors.black),),
            ],
          ),
          onPressed: (){
            toast('客服');
          },
        ),
        TextButton(
          child: Column(
            children: [
              Icon(Icons.star_border, color: Colors.black45,),
              Text('收藏', style: TextStyle(fontSize: 12, color: Colors.black),),
            ],
          ),
          onPressed: (){
            toast('收藏');
          },
        ),
        Expanded(
          child: MaterialButton(
            child: Text('加入购物车', style: TextStyle(fontSize: 12, color: Colors.white),),
            color: Colors.blueAccent,
            padding: EdgeInsets.only(left: 3, right: 3),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(20), bottomLeft: Radius.circular(20))),
            onPressed: (){
              toast('加入购物车');
            },
          ),
        ),
        Expanded(
          child: MaterialButton(
            child: Text('直接购买', style: TextStyle(fontSize: 12, color: Colors.white),),
            color: Colors.blueAccent,
            padding: EdgeInsets.only(left: 3, right: 3),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topRight: Radius.circular(20), bottomRight: Radius.circular(20))),
            onPressed: (){
              toast('直接购买');
              controller.toOrderConfirm();
            },
          ),
        ),
      ],
    );
  }

  /// 下面列表的item
  Widget itemBuilder(BuildContext context, int index){
    String item = controller.mList[index];
    return GestureDetector(
      onTap: ((){
        controller.toProductDetail({RouterKey.PRODUCT_ID: item, RouterKey.PRODUCT_NAME:'详情：'+index.toString()});
      }),
      child: Container(
        padding: EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
//      margin: EdgeInsets.only(top: (index == 0 || index == 1)? 10 : 0),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Color(0xFFECECEC),  //底色,阴影颜色
              //offset: Offset(1, 1), //阴影位置,从什么位置开始
              blurRadius: 0.5,  // 阴影模糊层度
              spreadRadius: 2,  //阴影模糊大小
            ),
          ],
        ),
        child: Column(
          children: [
            Image.asset('images/about_github.png', width: 20,height: 20,),
            Text('￥：'+item, style: TextStyle(color: Colors.red, fontSize: 18, /*fontStyle: FontStyle.italic,*/ fontWeight: FontWeight.bold),),
            Text('描述：'+item),
            index.isEven?Text('已购买：'+item):Padding(padding: EdgeInsets.zero),
          ],
        ),
      ),
    );
  }

  /*
  banner
   */
  Widget bannerBody(){
    var bannerData = [
      IdTextBean(0, "images/banner1.jpg"),
      IdTextBean(0, "images/banner2.jpg"),
      IdTextBean(0, "images/banner3.jpg"),
      IdTextBean(0, "images/banner4.jpg"),
      IdTextBean(0, "images/banner5.jpg"),
    ];

    BannerWidget banner = BannerWidget(
      delegate: BannerDelegate(
        childAtIndex: (idx) => Image.asset(bannerData[idx].str, fit: BoxFit.cover,),
        onTap: ((index){
          controller.toPhoto();
        }),
        autoLoop: true,
      ),
      pageIndicator: PageIndicator(indicatorBuilder: normalStyleBuilder,selectedIndicatorBuilder: selectedStyleBuilder,),
    );
    banner.delegate.numberOfBanners.value = bannerData.length;
    banner.pageIndicator.numberOfPages.value = bannerData.length;
    return banner;
  }
  static Widget normalStyleBuilder() {
    IndicatorStyle style = IndicatorStyle(Size(6.0, 6.0), BoxDecoration(color: Colors.black, borderRadius:BorderRadius.circular(6.0)));
    return Container(
      decoration: style.decoration,
      width: style.size.width,
      height: style.size.height,
    );
  }
  static Widget selectedStyleBuilder() {
    IndicatorStyle style = IndicatorStyle(Size(6.0, 6.0), BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(6.0)));
    return Container(
      decoration: style.decoration,
      width: style.size.width,
      height: style.size.height,
    );
  }

}